<template>
  <div>
    <!-- 单行文本 -->
    <div class="label-value">
      <div class="label">标题</div>
      <div class="value">
        <el-input
          size="mini"
          v-model="viewModel.title"
          placeholder="请输入标题标题"
        />
      </div>
    </div>
    <div class="label-value">
      <div class="label">默认值</div>
      <div class="value">
        <el-input size="mini" v-model="viewModel.defaultValue" />
      </div>
    </div>
    <div class="label-value" v-if="viewProps.maxLength">
      <div class="label">最多填</div>
      <div class="value">
        <el-input size="mini" v-model="viewModel.maxLength" type="number">
          <template slot="append">个字符</template>
        </el-input>
      </div>
    </div>
    <div class="label-value" v-if="viewProps.maxLength">
      <div class="label">是否必填</div>
      <div class="value">
        <el-switch v-model="viewModel.required" />
      </div>
    </div>
    <div class="label-value" v-if="viewProps.showLimit">
      <div class="label">输入统计</div>
      <div class="value">
        <el-switch v-model="viewModel.showLimit" />
      </div>
    </div>
    <div class="label-value" v-if="viewProps.isReadonly">
      <div class="label">是否只读</div>
      <div class="value">
        <el-switch v-model="viewModel.isReadonly" />
      </div>
    </div>
    <div class="label-value" v-if="viewProps.isDisable">
      <div class="label">是否禁用</div>
      <div class="value">
        <el-switch v-model="viewModel.isDisable" />
      </div>
    </div>
    <!-- 单选 -->
    <div class="label-value" v-if="viewProps.radio">
      <div class="label">选项配置</div>
      <div class="value">
        <draggable
          v-model="viewModel.optionList"
          v-bind="dragOption"
          style="height: 100%; width: 100%"
        >
          <div v-for="(item, index) in viewModel.optionList" :key="index">
            <el-row
              :gutter="12"
              style="margin-bottom: 10px; display: flex; align-items: center"
            >
              <el-col :span="12">
                <el-input size="mini" v-model="item.label"> </el-input>
              </el-col>
              <el-col :span="3" :offset="1">
                <i
                  class="el-icon-circle-plus-outline"
                  @click="addSessionsNum(index)"
                ></i>
              </el-col>
              <el-col :span="3">
                <i
                  class="el-icon-remove-outline"
                  @click="cutSessionsNum(index)"
                ></i>
              </el-col>
              <el-col :span="3">
                <i class="el-icon-rank drag-handle"></i>
              </el-col>
            </el-row>
          </div>
        </draggable>
      </div>
    </div>
    <!-- 复选 -->
    <div class="label-value" v-if="viewProps.checkbox">
      <div class="label">选项配置</div>
      <div class="value">
        <draggable
          v-model="viewModel.optionList"
          v-bind="dragOption"
          style="height: 100%; width: 100%"
        >
          <div v-for="(item, index) in viewModel.optionList" :key="index">
            <el-row
              :gutter="12"
              style="margin-bottom: 10px; display: flex; align-items: center"
            >
              <el-col :span="12">
                <el-input size="mini" v-model="item.label"> </el-input>
              </el-col>
              <el-col :span="3" :offset="1">
                <i
                  class="el-icon-circle-plus-outline"
                  @click="addSessionsNum(index)"
                ></i>
              </el-col>
              <el-col :span="3">
                <i
                  class="el-icon-remove-outline"
                  @click="cutSessionsNum(index)"
                ></i>
              </el-col>
              <el-col :span="3">
                <i class="el-icon-rank drag-handle"></i>
              </el-col>
            </el-row>
          </div>
        </draggable>
      </div>
    </div>
    <!-- 日期 -->
    <div class="label-value" v-if="viewProps.dateType">
      <div class="label">时间类型</div>
      <div class="value">
        <el-select size="mini" v-model="viewModel.dateType" placeholder="请选择" @change="changeDateFormat">
          <el-option label="日期(date)" value="date"></el-option>
          <el-option label="周(week)" value="week"></el-option>
          <el-option label="月(month)" value="month"></el-option>
          <el-option label="年(year)" value="year"></el-option>
          <el-option label="日期时间(datetime)" value="datetime"></el-option>
        </el-select>
      </div>
    </div>
    <!-- 选项卡 -->
    <template v-if="viewProps.tab">
      <div
        class="tabs"
        v-for="(item, index) in viewModel.editableTabs"
        :key="index"
      >
        <div class="title">选项卡{{ index + 1 }}</div>
        <div class="label-value">
          <div class="label">名称</div>
          <div class="value">
            <el-input size="mini" v-model="item.title" />
          </div>
        </div>
        <div class="label-value">
          <div class="label">类型</div>
          <div class="value">
            <el-select
              v-model="item.type"
              placeholder="请选择"
              size="mini"
              @change="changeType(item)"
            >
              <el-option label="标签页" value="0"></el-option>
              <el-option label="视图" value="1"></el-option>
            </el-select>
          </div>
        </div>
        <div class="label-value">
          <div class="label">模块</div>
          <div class="value">
            <el-select
              v-model="item.module"
              placeholder="请选择"
              size="mini"
              @change="changeModule(item)"
            >
              <el-option
                v-for="item in moduleData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { OptionItem } from "@/fields/config";
import draggable from "vuedraggable";
export default {
  name: "PropsPanel",
  components: {
    draggable,
  },
  props: ["currCfg"],
  data() {
    return {
      viewProps: {},
      dragOption: {
        sort: true,
        ghostClass: "ghost",
        handle: ".drag-handle",
        animation: 300,
      },
      moduleData: [],
    };
  },
  computed: {
    viewModel() {
      return this.currCfg.config;
    },
  },
  methods: {
    //增加选项
    addSessionsNum(index) {
      var that = this;
      that.viewModel.optionList.splice(
        index + 1,
        0,
        new OptionItem("选项" + that.viewModel.optionList.length)
      );
      // that.viewModel.optionList.push(new OptionItem("选项" + (that.viewModel.optionList.length+1)))
    },

    //减少选项
    cutSessionsNum(index) {
      var that = this;
      that.viewModel.optionList.splice(index, 1);
    },

    // 切换日期的显示
    changeDateFormat(e){
      this.viewProps.defaultValue = ''
      switch(e){
        case 'date':
          this.viewModel.dateFormat = ''
          this.viewModel.valueFormat = 'yyyy-MM-dd'
          break;
        case 'week':
          this.viewModel.dateFormat = 'yyyy 第 WW 周'
          this.viewModel.valueFormat = 'yyyy-MM-dd'
          break;
        case 'month':
          this.viewModel.dateFormat = ''
          this.viewModel.valueFormat = 'yyyy-MM'
          break;
        case 'year':
          this.viewModel.dateFormat = ''
          this.viewModel.valueFormat = 'yyyy'
          break;
        case 'datetime':
          this.viewModel.dateFormat = ''
          this.viewModel.valueFormat = 'yyyy-MM-dd HH-mm-ss'
          break;
        default:
          break;
      }
    },

    changeType(item) {
      //   重新发起请求获取数据
      let arr = [
        {
          label: "表单",
          value: "0",
        },
        {
          label: "视图",
          value: "1",
        },
      ];
      this.moduleData = arr;
    },
    changeModule(item) {
      this.viewModel.editableTabs.map((item1) => {
        if (item1.key == item.key) {
          if (item.module == "0") {
            item1.content = "<p>1111</p><h1>ppp</h1>";
          } else {
            item1.content =
              "<table><tr><th>111</th><th>222</th></tr><tr><td>333</td><td>444</td></tr></table>";
          }
        }
      });
    },
  },
  mounted() {
    this.viewProps = this.currCfg.config.propsValue;
    console.log(this.currCfg);
  },
};
</script>,
<style lang="scss" scoped>
</style>

